<template>
	<view class="service">
		<view class="list flex_r_between" v-for="(item,index) in list" :key="index">
			<view class="left">
				<image :src="item.images[0]" mode="aspectFill"></image>
				<view class="info">
					<view class="name flex">
						<view>{{item.spec_name}}</view>
					</view>
					<view class="text">{{item.profile}}</view>
					<view class="price flex">
						{{Number(item.price).toFixed(0)}} <text>元/次</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				
				page:1,
				
				total:0,
				
				id:0,
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getList(){
				this.request.httpTokenRequest({
					url: "store.service/getStoreList",
					method: "get"
				}, {
					page:this.page,
					store_id:this.id
				}).then(res => {
					if (res.code == 0) {
						this.total = res.data.total
						res.data.data.forEach(item=>{
							this.list.push(item)
							if(item.checked){
								this.selectList.push(item.id)
							}
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
		},
		onLoad(option) {
			this.id = option.id
			this.getList()
		},
		onReachBottom() {
			if(this.total > this.list.length){
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	#dark {
		filter: grayscale(100%);
	}
	.service {
		padding: 30rpx;
		min-height: 100vh;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-size: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;

		.address {
			display: flex;
			align-items: center;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			padding: 0 20rpx 0 5rpx;

			text {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-left: 6rpx;
			}
		}


	}


	.list {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 35rpx 30rpx 30rpx;
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-end;
		.left {
			display: flex;
			image {
				width: 160rpx;
				height: 241rpx;
				margin-right: 31rpx;
				flex-shrink: 1;
			}

			.info {
				flex: 1;
				.right {
					align-items: center;
					display: flex;
					flex-direction: row-reverse;
				}
				.name {
					align-items: center;

					view {
						font-size: 30rpx;
						font-weight: 600;
						color: #0F0807;
						line-height: 42rpx;
					}
				}
				.text {
					font-size: 22rpx;
					color: #888889;
					line-height: 30rpx;
					margin: 21rpx 0 31rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					word-break: break-all;
				}
				.price {
					align-items: flex-end;
					font-size: 34rpx;
					font-weight: 600;
					color: #EF5233;
					line-height: 48rpx;

					text {
						font-size: 18rpx;
						color: #EC2700;
						line-height: 43rpx;
						margin-left: 6rpx;
					}
				}
			}
		}

		.right {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.btn {
		width: 100vw;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 27rpx 0 70rpx;
		box-sizing: border-box;
		.left {
			align-items: center;
			text {
				font-size: 30rpx;
				color: #0F0807;
				line-height: 42rpx;
				margin: 0 20rpx 0 2rpx;
			}
			i {
				font-style: normal;
				font-size: 26rpx;
				color: #929292;
				line-height: 37rpx;
			}
		}
		.right {
			width: 200rpx;
			height: 68rpx;
			background: #3393FF;
			border-radius: 34rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
		}
	}

</style>